<template>
  <div class="videos-bar">
    <video-player  class="video-player vjs-custom-skin "
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
     
    >
    
    </video-player>  
  </div>
</template>

<script>
export default {
  name:"Videos",
  props:["videoList","index"],
  data(){
    return{
      playerOptions : {
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', 
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
            {
              id:"1",
              src: this.videoList.url,  // 路径
              type: 'video/mp4'  // 类型
            }
        ],
        width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },
      // 自定义的默认播放状态
      playing:false  
    }
  },
  created(){

     this.autoPlayAction()
  },
  methods:{
    // 停止播放
    playOnStop(){
      // 判断播放状态
      if(this.playing) {
        this.$refs.videoPlayer.player.pause()
        this.playing = false
      }else{
        this.$refs.videoPlayer.player.play()
        this.playing = true
      }
    },
    autoPlayAction(){
      // 先要判断是否为首页
      if(this.index == 0){
        this.playerOptions.autoplay = true
      }else{
        this.playerOptions.autoplay = false
      }
    },
  
   

  }
}
</script>

<style lang="less" scoped>
  .videos-bar{
    position: relative;
  }
  .vjs-default-skin button{
    position: absolute;

  }
 
</style>